<template>
	<!-- 项目审核、执行、延期、核销页面 -->
	<!-- 对应预测申报最后面的项目核销页面，其他审核、执行等内容都一样 -->
	<view class="costs-assign">
		<div class="tab-header"><u-tabs-swiper ref="tabs" name="cate_name" active-color="#f4570e" count="cate_count" :list="list" :is-scroll="false"></u-tabs-swiper></div>
		<div class="costs-assign-item-wrap">
			<div :class="['costs-assign-item orange']" v-for="i in 10">
					<div class="del-btn"><u-icon size="26" name="close" :bold="true" color="#fff"></u-icon></div>
					<div class="costs-assign-item-title">
						<div class="title nowrap u-flex u-row-between">
							<div>
								<text class="line"></text>
								项目执行审核
							</div>
							<!-- <text class="u-font-lg u-m-r-20 gray">1+媒体&nbsp;|&nbsp;张三</text> -->
						</div>
						<div class="timer nowrap">户外墙体广告护栏广告</div>
					</div>
					<div class="costs-assign-item-con" style="border-bottom: 1rpx dashed #b9b9b9;">
						<text :class="['status-audit', { success: i == 1 }]">审核完成</text>
						<div class="row-item">2022年第一季度</div>
						<div class="row-item">
							<div class="label-name">分类</div>
							<div class="price">1+媒体</div>
						</div>
						<div class="row-item">
							<div class="label-name">申报人</div>
							<div class="price">张三</div>
						</div>
					</div>
					<!-- <div class="add-timer" style="border-top: 1rpx dashed #b9b9b9;">项目时间:2022-12-28 12:09:00 </div> -->
					<div class="btn-wrap">
						<div class="btn-item info-btn">进度</div>
						<div class="btn-item set-btn">审核</div>
					</div>
				</div>
			
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowBtn: false,
			list: [
				{
					cate_name: '待审核'
				},
				{
					cate_name: '已审核'
				},
				{
					cate_name: '全部',
					cate_count: 5
				},
				{
					cate_name: '已驳回'
				}
			]
		};
	}
};
</script>

<style lang="scss">
.costs-assign {
	width: 750rpx;
	// padding:1rpx 20rpx 20rpx 20rpx;
	.tab-header{
		height: 100rpx;
		position: fixed;
		background: #fff;
		width: 100%;
		z-index: 9999;
	}
	.costs-assign-item-wrap{
		
		padding: 100rpx 20rpx 20rpx 20rpx;
	}
	.costs-assign-item {
		
		position: relative;
		box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
		border-radius: 16rpx;
		margin-bottom: 28rpx;
		border-top: 6rpx solid #ff8441;
		.del-btn {
			position: absolute;
			right: 0;
			top: -6rpx;
			font-weight: bold;
			background: #f4570e;
			width: 60rpx;
			text-align: center;
			height: 44rpx;
			line-height: 44rpx;
			border-radius: 0 16rpx 0 16rpx;
		}
		.costs-assign-item-title {
			padding-top: 30rpx;
			padding-bottom: 10rpx;
			border-radius: 16rpx 16rpx 0 0;
			line-height: 50rpx;
			font-size: 30rpx;
			border-bottom: 1rpx dashed #b9b9b9;
			.title {
				display: flex;
				align-items: center;
				flex: 2;
				font-size: 36rpx;
				font-weight: bold;
				.line {
					display: inline-block;
					height: 36rpx;
					width: 6rpx;
					margin-right: 20rpx;
					background: #ff8441;
				}
			}
			.timer {
				margin-left: 26rpx;
				flex: 1;
				color: #ff8441;
				font-size: 30rpx;
			}
		}
		.costs-assign-item-con {
			font-size: 30rpx;
			padding: 0 20rpx 10rpx 20rpx;
			position: relative;
			.status-audit {
				position: absolute;
				right: 80rpx;
				font-weight: bold;
				top: 10%;
				// transform: rotateZ(30deg);
			}
			.success {
				color: #2eac67;
			}
			.row-item {
				display: flex;
				margin-top: 16rpx;
				.label-name {
					color: #666;
					width: 200rpx;
				}
				.price {
					// font-size: 36rpx;
				}
			}
			hr {
				margin: 28rpx 0;
				border: 1rpx dashed #b9b9b9;
			}
		}
		.add-timer {
			padding-top: 20rpx;
			margin-left: 20rpx;
		}
		.btn-wrap {
			margin: 20rpx;
			padding-bottom: 20rpx;
			display: flex;
			justify-content: flex-end;
			.btn-item {
				margin-left: 20rpx;
				padding: 0 50rpx;
				border-radius: 6rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
			}
			.info-btn,
			.set-btn,
			.adjust-btn {
				border: 1px solid #ff7626;
				color: #ff7626;
			}
			.cost-btn {
				background: linear-gradient(301.09deg, #f29e40 6.64%, #f7b66e 91.7%);
				color: #fff;
			}
		}
	}
}
.gray {
	color: #999;
	font-weight: normal;
}
.center {
	text-align: center;
}
.nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/deep/.u-dropdown__content__popup {
	border: 1px solid #f2f3f6;
}
/deep/.u-dropdown__menu {
	height: 68rpx !important;
	background: linear-gradient(301.09deg, #f29e40 6.64%, #f7b66e 91.7%);
	border-radius: 6rpx;
}
/deep/.u-dropdown__menu__item__text,
/deep/.u-icon__icon {
	color: #fff !important;
}
/deep/.u-dropdown__content__mask {
	display: none;
}
</style>
